<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item label="县区" prop="city" v-show="cityShow">
        <el-select
          v-model="queryParams.city"
          clearable
          placeholder="请选择"
          size="small"
          @change="selectCity"
        >
          <el-option
            v-for="item in this.cityData"
            :key="item.deptCode"
            :label="item.deptName"
            :value="item.deptCode">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="乡镇" prop="town" v-show="townShow">
        <el-select
          v-model="queryParams.town"
          clearable
          placeholder="请选择"
          size="small"
          @change="selectTown"
        >
          <el-option
            v-for="item in this.townData"
            :key="item.deptCode"
            :label="item.deptName"
            :value="item.deptCode">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="村" prop="village" v-show="villageShow">
        <el-select
          v-model="queryParams.village"
          clearable
          placeholder="请选择"
          size="small"
          @change="selectVillage"
        >
          <el-option
            v-for="item in this.villageData"
            :key="item.deptCode"
            :label="item.deptName"
            :value="item.deptCode">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称" prop="jfmc">
        <el-input
          v-model="queryParams.jfmc"
          placeholder="请输入甲方或乙方名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="审核状态" prop="shzt">
        <el-select
          v-model="queryParams.shzt"
          clearable
          placeholder="请选择"
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in contractOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="是否上传附件" prop="htfj">
         <el-select
           v-model="queryParams.htfj"
           clearable
           placeholder="请选择"
           size="small"
         >
           <el-option
             v-for="item in this.fjData"
             :key="item.value"
             :label="item.name"
             :value="item.value">
           </el-option>
         </el-select>
       </el-form-item>-->
      <!-- <el-form-item label="审核状态" prop="shzt">
         <el-select
           v-model="queryParams.shzt"
           clearable
           placeholder="请审核"
           size="small"
           style="width: 240px"
         >
           <el-option
             v-for="dict in contractOptions"
             :key="dict.dictValue"
             :label="dict.dictLabel"
             :value="dict.dictValue"
           />
         </el-select>
       </el-form-item>-->

      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="review"
          size="mini"
          :disabled="multiple"
          @click="handlefspl"
          v-hasPermi="['contract:contract:approvalpassStatistics']"
        >
          <svg-icon class="svg" icon-class="examine"/>
          批量审核
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="CBHTList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" :selectable='checkboxT'/>
      <el-table-column label="合同编号" width="200" align="center" prop="htbm"/>
      <el-table-column label="甲方名称" width="80" align="center" prop="jfmc"/>
      <el-table-column label="乙方名称" width="90" align="center" prop="cbfmc"/>
      <el-table-column label="丙方名称" width="100" align="center" prop="dsfmc"/>
      <el-table-column label="国有土地" align="center">
        <el-table-column
          align="center"
          prop="statistics.gyTotalArea"
          label="面积（亩）"
          width="100">
          <template slot-scope="scope">
            <div>{{ scope.row.statistics.gyTotalArea == 0 ? "-" : scope.row.statistics.gyTotalArea }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="statistics.gyTotalPrice"
          label="价格（元）"
          width="100">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.statistics.gyTotalPrice == 0 ? "-" : (String(scope.row.statistics.gyTotalPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.statistics.gyTotalPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.statistics.gyTotalPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="集体土地" align="center">
        <el-table-column
          align="center"
          prop="statistics.jtTotalArea"
          label="面积（亩）"
          width="100">
          <template slot-scope="scope">
            <div>{{ scope.row.statistics.jtTotalArea == 0 ? "-" : scope.row.statistics.jtTotalArea }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="statistics.jtTotalPrice"
          label="价格（元）"
          width="100">
          <template slot-scope="scope">
            <div> {{
                scope.row.statistics.jtTotalPrice == 0 ? "-" : (String(scope.row.statistics.jtTotalPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.statistics.jtTotalPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.statistics.jtTotalPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="附着物" align="center">
        <el-table-column
          align="center"
          prop="statistics.scTotalArea"
          label="面积（亩）"
          width="100">
          <template slot-scope="scope">
            <div>{{ scope.row.statistics.qmTotalArea == 0 ? "-" : scope.row.statistics.qmTotalArea }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="statistics.jtTotalPrice"
          label="价格（元）"
          width="100">
          <template slot-scope="scope">
            <div style="line-height: 23px; text-align: left;" v-show="scope.row.statistics.qmTotalPrice !=0">
              {{
                scope.row.statistics.qmTotalPrice == 0 ? "-" : (String(scope.row.statistics.qmTotalPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.statistics.qmTotalPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.statistics.qmTotalPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="地上附属物" align="center">
        <el-table-column
          align="center"
          prop="statistics.fswTotalPrice"
          label="面积（亩）"
          width="120">
          <template slot-scope="scope">
            <div>{{ scope.row.statistics.fswTotalArea == 0 ? "-" : scope.row.statistics.fswTotalArea }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="statistics.fswTotalPrice"
          label="价格（元）"
          width="120">
          <template slot-scope="scope">
            <div style="line-height: 23px; text-align: center;">
              {{
                scope.row.statistics.fswTotalPrice == 0 ? "-" : (String(scope.row.statistics.fswTotalPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.statistics.fswTotalPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.statistics.fswTotalPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="总面积（亩）" width="130" align="center" prop="statistics.scTotalArea"/>
      <el-table-column label="合同金额（元）" width="130" align="center" prop="statistics.totalPrice">
        <template slot-scope="scope">
          {{
            scope.row.statistics.totalPrice == 0 ? "-" : (String(scope.row.statistics.totalPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.statistics.totalPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.statistics.totalPrice).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
          }}
        </template>
      </el-table-column>
      <el-table-column label="地块数" align="center" prop="statistics.dkTotalNumber"/>
      <el-table-column fixed="right" label="审核状态" width="90" :formatter="contractFormat" align="center" prop="shzt">
        <template slot-scope="scope">
          <div class="statusDv">
            <div class="statudPoint" :class="'Bg'+scope.row['shzt']"></div>
            <div v-for="sta in contractOptions" v-if="sta.dictValue == scope.row['shzt']">{{ sta.dictLabel }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="附件" align="center" prop="htwj" width="70">
        <template slot-scope="scope">
          <div class="statusDv">
            <div v-if="scope.row['htfj']==''||scope.row['htfj']==undefined||scope.row['htfj']==null"
                 style="color: orange">未上传
            </div>
            <div v-else style="color:#13ce66">已上传</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="200" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-details"
            @click="handleView(scope.row)"
            v-hasPermi="['contract:contract:query']"
          >
            <svg-icon class="svg" icon-class="details"/>
            预览
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-details"
            @click="handleListDetails(scope.row)"
            v-hasPermi="['contract:contract:query']"
          >
            <svg-icon class="svg" icon-class="details"/>
            详情
          </el-button>
          <el-button
            v-if="scope.row.shzt==1"
            size="mini"
            type="text"
            @click="handlefs(scope.row)"
            v-hasPermi="['contract:contract:approvalpassStatistics']"
          >
            <svg-icon class="svg" icon-class="examine"/>
            审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="cancel">
      <el-form ref="form" :model="form" :rules="rules" label-width="95px">
        <el-form-item label="合同编号" prop="htbm" required>
          <el-input v-model="form.htbm" placeholder="请输入合同编号" disabled/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="甲方名称" prop="jfzjhm" required>
              <el-select
                v-bind:disabled="!cityUse"
                v-model="form.jfzjhm"
                clearable
                placeholder="请选择"
                size="small"
                style="width: 240px"
                @change="selectCity"
              >
                <el-option
                  v-for="item in this.cityFormData"
                  :key="item.deptCode"
                  :label="item.deptName"
                  :value="item.deptCode">
                </el-option>
              </el-select>
              <el-input v-show="1==2" v-model="form.jfmc"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="乙方名称" prop="cbfbm" required>
              <el-select
                v-model="form.cbfbm"
                v-bind:disabled="!townUse"
                clearable
                placeholder="请选择"
                size="small"
                style="width: 240px"
                @change="selectTown"
              >
                <el-option
                  v-for="item in this.townFormData"
                  :key="item.deptCode"
                  :label="item.deptName"
                  :value="item.deptCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="丙方名称" prop="by2">
          <el-select
            v-model="form.by2"
            clearable
            placeholder="请选择"
            size="small"
            style="width: 240px"
            @change="selectVillage"
          >
            <el-option
              v-for="item in this.villageFormData"
              :key="item.deptCode"
              :label="item.deptName"
              :value="item.deptCode">
            </el-option>
          </el-select>
          <el-input v-show="1==2" v-model="form.dsfmc"/>
        </el-form-item>
        <el-form-item label="合同名称" prop="by1">
          <el-input v-model="form.by1" placeholder="请输入合同名称"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="form.remark" placeholder="请输入备注"/>
        </el-form-item>
        <el-form-item label="附件" prop="fj">
          <el-upload
            class="avatar-uploader"
            list-type="picture-card"
            :file-list="fileList"
            :action="productFileAction"
            :before-upload="beforeUpload"
            :headers="headers"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :onSuccess="uploadSuccess"
            multiple
            accept="image/*"
            name="uploadfiles">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-input type="textarea" v-show="1==2" v-model="form.htfj" placeholder="请输入附加"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="openListDetails" width="800px" append-to-body @close="cancel">
      <el-form ref="form" :model="form" :rules="rules" label-width="95px">
        <el-form-item label="合同编号" prop="htbm" required>
          <el-input v-model="form.htbm" placeholder="请输入合同编号" disabled/>
        </el-form-item>
        <el-form-item label="合同名称" prop="by1">
          <el-input v-model="form.by1" placeholder="请输入合同名称" disabled/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="甲方名称" prop="jfzjhm">
              <el-select
                disabled
                v-bind:disabled="!cityUse"
                v-model="form.jfzjhm"
                clearable
                placeholder="请选择"
                size="small"
                style="width: 240px"
                @change="selectCity"
              >
                <el-option
                  v-for="item in this.cityFormData"
                  :key="item.deptCode"
                  :label="item.deptName"
                  :value="item.deptCode">
                </el-option>
              </el-select>
              <el-input v-show="1==2" v-model="form.jfmc"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="乙方名称" prop="cbfbm">
              <el-select
                disabled
                v-model="form.cbfbm"
                v-bind:disabled="!townUse"
                clearable
                placeholder="请选择"
                size="small"
                style="width: 240px"
                @change="selectTown"
              >
                <el-option
                  v-for="item in this.townFormData"
                  :key="item.deptCode"
                  :label="item.deptName"
                  :value="item.deptCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="丙方名称" prop="by2">
          <el-select
            v-model="form.by2"
            disabled
            clearable
            placeholder="请选择"
            size="small"
            style="width: 240px"
            @change="selectVillage"
          >
            <el-option
              v-for="item in this.villageFormData"
              :key="item.deptCode"
              :label="item.deptName"
              :value="item.deptCode">
            </el-option>
          </el-select>
          <el-input v-show="1==2" v-model="form.dsfmc"/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="总面积(亩)">
              <el-input v-model="form.scTotalArea" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同金额(元)">
              <el-input v-model="form.totalPrice" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="form.remark" disabled/>
        </el-form-item>
        <el-form-item label="附件" prop="fj">
          <el-upload
            disabled
            class="avatar-uploader"
            list-type="picture-card"
            :file-list="fileList"
            :action="productFileAction"
            :before-upload="beforeUpload"
            :headers="headers"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :onSuccess="uploadSuccess"
            multiple
            accept="image/*"
            name="uploadfiles">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-input type="textarea" v-show="1==2" v-model="form.htfj" placeholder="请输入附加"/>
        </el-form-item>
      </el-form>
      <el-table v-show="recordList.length>0" v-loading="loading" :data="recordList">
        <el-table-column label="审核人" align="center" prop="approvalName"/>
        <el-table-column label="审核时间" align="center" prop="approvalTime"/>
        <el-table-column label="审核状态" align="center" prop="state">
          <template slot-scope="scope">
            <div class="statusDv">
              <div class="statudPoint" :class="'Bg'+scope.row['state']"></div>
              <div v-for="sta in contractOptions" v-if="sta.dictValue == scope.row['state']">{{ sta.dictLabel }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="审核意见" align="center" prop="remark"/>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">确 定</el-button>
      </div>
    </el-dialog>
    <!--详情-->
    <el-dialog :title="title"
               :visible.sync="openDetails"
               :close-on-click-modal="false"
               style="height:auto;"
               width="900"
               :fullscreen="true"
               ref="details"
    >
      <iframe :src="src" frameborder="0" style="width: 100%; height: 850px;" scrolling="no"></iframe>
    </el-dialog>


    <!--    审核-->
    <el-dialog :title="title" :visible.sync="openfs" width="800px" append-to-body @close="cancel">
      <el-collapse v-model="activeName">
        <el-collapse-item title="合同信息 【点击查看详情】" name="1">
          <el-form ref="form" :model="form" label-width="105px">
            <el-form-item label="合同编号">
              <el-input v-model="form.htbm" placeholder="请输入合同编号" disabled/>
            </el-form-item>
            <el-form-item label="合同名称">
              <el-input v-model="form.by1" placeholder="请输入合同名称" disabled/>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="甲方名称">
                  <el-select
                    v-model="form.jfzjhm"
                    clearable
                    placeholder="请选择"
                    size="small"
                    style="width: 240px"
                    @change="selectCity"
                    disabled
                  >
                    <el-option
                      v-for="item in this.cityData"
                      :key="item.deptCode"
                      :label="item.deptName"
                      :value="item.deptCode">
                    </el-option>
                  </el-select>
                  <el-input v-show="1==2" v-model="form.jfmc"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="乙方名称">
                  <el-select
                    v-model="form.cbfbm"
                    clearable
                    placeholder="请选择"
                    size="small"
                    style="width: 240px"
                    disabled
                    @change="selectTown"
                  >
                    <el-option
                      v-for="item in this.townData"
                      :key="item.deptCode"
                      :label="item.deptName"
                      :value="item.deptCode">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="丙方名称">
              <el-select
                v-model="form.by2"
                clearable
                placeholder="请选择"
                size="small"
                disabled
                style="width: 240px"
                @change="selectVillage"
              >
                <el-option
                  v-for="item in this.villageData"
                  :key="item.deptCode"
                  :label="item.deptName"
                  :value="item.deptCode">
                </el-option>
              </el-select>
              <el-input v-show="1==2" v-model="form.dsfmc"/>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="总面积(亩)">
                  <el-input v-model="form.scTotalArea" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合同金额(元)">
                  <el-input v-model="form.totalPrice" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="备注" prop="remarks">
              <el-input type="textarea" v-model="form.remarks" disabled/>
            </el-form-item>
            <el-form-item label="附件" prop="fj">
              <el-upload
                class="avatar-uploader"
                list-type="picture-card"
                disabled
                :file-list="fileList"
                :action="productFileAction"
                :headers="headers"
                :on-preview="handlePreview"
                multiple
                accept="image/*"
                name="uploadfiles">
              </el-upload>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
      <el-divider content-position="left">审核信息</el-divider>
      <el-form ref="formsh" :model="formsh" :rules="rules1" label-width="95px">
        <el-form-item label="审核状态" prop="status">
          <!--<el-select
            v-model="formsh.status"
            clearable
            placeholder="请选择"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="dict in approveStatus"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue">
            </el-option>
          </el-select>-->
          <el-radio-group v-model="formsh.status">
            <el-radio v-for="item in approveStatus"
                      border
                      size="medium"
                      :label="item.dictValue">
              {{ item.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见" prop="remark">
          <el-input type="textarea" v-model="formsh.remark" placeholder="请输入审核意见"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormfs">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!--复审 批量-->
    <el-dialog :title="title" :visible.sync="openfspl" width="900px" append-to-body>
      <el-form ref="formsh" :model="formsh" :rules="rules1" label-width="95px">
        <!-- <el-form-item label="复审状态" prop="status" required>
           <el-radio-group v-model="formsh.status">
             <el-radio v-for="item in approveStatus"
                       border
                       size="medium"
                       :label="item.dictValue">
               {{ item.dictLabel }}
             </el-radio>
           </el-radio-group>
          &lt;!&ndash; <el-select
             v-model="formsh.status"
             clearable
             placeholder="请选择"
             size="small"
             style="width: 100%"
           >
             <el-option
               v-for="dict in approveStatus"
               :key="dict.dictValue"
               :label="dict.dictLabel"
               :value="dict.dictValue">
             </el-option>
           </el-select>&ndash;&gt;
         </el-form-item>-->
        <el-form-item label="审核状态" prop="status">
          <el-radio-group v-model="formsh.status">
            <el-radio v-for="item in approveStatus"
                      border
                      size="medium"
                      :label="item.dictValue">
              {{ item.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="复审意见" prop="remark">
          <el-input type="textarea" v-model="formsh.remark" placeholder="请输入复审意见"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormfs">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

    <el-dialog title="审核记录" :visible.sync="openShjl" width="800px" append-to-body>
      <div style="min-height: 484px">
        <el-table v-loading="loading" :data="recordList" @selection-change="handleSelectionChange">
          <el-table-column label="审核人" align="center" prop="approvalName"/>
          <el-table-column label="审核时间" align="center" prop="approvalTime"/>
          <el-table-column label="审核状态" align="center" prop="state">
            <template slot-scope="scope">
              <div class="statusDv">
                <div class="statudPoint" :class="'Bg'+scope.row['state']"></div>
                <div v-for="sta in contractOptions" v-if="sta.dictValue == scope.row['state']">{{ sta.dictLabel }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="审核意见" align="center" prop="remark"/>
        </el-table>
      </div>
      <pagination
        v-show="recordtotal>0"
        :total="recordtotal"
        :page.sync="queryExamineParams.pageNum"
        :limit.sync="queryExamineParams.pageSize"
        @pagination="getRecordList"
      />
    </el-dialog>

    <el-dialog title="附着物信息" :visible.sync="openFzw" width="800px" append-to-body>
      <div style="min-height: 484px">
        <el-table v-loading="loading" :data="fzwList" @selection-change="handleSelectionChange">
          <el-table-column label="附着物" align="center" prop="evaluationItemName"/>
          <el-table-column label="面积（亩）" align="center" prop="evaluationArea"/>
          <el-table-column label="价格（元）" align="center" prop="price">
            <template slot-scope="scope">
              {{
                scope.row.price == 0 ? "-" : String(scope.row.price).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
              }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addStatistics,
  approvalList,
  approvalNoStatistics,
  approvalPassStatistics,
  delCBHT,
  editStatistics,
  exportCBHT,
  getCBHT,
  getCode,
  listCBHT,
  listStatisticsIncludeQingMiao,
  newfile
} from "@/api/htgl/CBHT";
import {childlistUse, getInfoByDeptCode} from "@/api/system/dept";
import {getToken} from "@/utils/auth";
import {getInfo} from "@/api/login";
import {validate} from 'json-schema'

export default {
  name: "CBHT",
  data() {
    let validateby1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("合同名称不能为空"));
      } else {
        callback();
      }
    };
    return {
      openFzw: false,
      openDetails: false,
      dialogVisible: false,
      dialogImageUrl: '',
      num: 0,
      headers: {Authorization: 'Bearer ' + getToken()},
      productFileAction: process.env.VUE_APP_BASE_API + '/system/resource/profile/upload',
      fileList: [],
      src: "",
      pdfurls: "",
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      imageList: "",
      imageTempList: [],
      fzwList: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      CBHTList: [],
      contractOptions: [],
      contractTypeOptions: [],
      approveStatus: [],
      // 弹出层标题
      title: "",
      activeName: '1',//展开name为1的折叠板
      // 是否显示弹出层
      open: false,
      openListDetails: false,
      openfs: false,
      openfspl: false,
      openShjl: false,
      fjData: [{
        value: "Y",
        name: "上传"
      }, {
        value: "N",
        name: "未上传"
      }],
      cityUse: '',
      townUse: '',
      cityShow: '',
      townShow: '',
      villageShow: '',
      cityData: [],
      townData: [],
      villageData: [],
      cityFormData: [],
      townFormData: [],
      villageFormData: [],
      recordList: [],
      recordtotal: 0,
      queryExamineParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        contractId: null,
        shzt: null,
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        cbhtbm: null,
        ycbhtbm: null,
        jfmc: null,
        cbfbm: null,
        cbfs: null,
        cbqxq: null,
        cbqxz: null,
        htzmj: null,
        cbdkzs: null,
        qdsj: null,
        htzt: null,
        shsj: null,
        shr: null,
        shbz: null,
        shzt: null,
        sffsdx: null,
        dxsl: null,
        by1: null,
        by2: null,
        by3: null,
        jfdh: null,
        jfsfz: null,
        dsfsfz: null,
        dsfdh: null,
        dsfmc: null,
        htzje: null,
        by4: null,
        by5: null,
        city: null,
        town: null,
        village: null,
      },
      // 表单参数
      form: {},
      formsh: {},
      // 表单校验
      rules: {
        by1: [
          {required: true, message: "合同名称不能为空", trigger: "blur"}
        ],
        htbm: [
          {required: true, message: "合同编号不能为空", trigger: "blur"}
        ],
        jfzjhm: [
          {required: true, message: "甲方名称不能为空", trigger: "blur"}
        ],
        cbfbm: [
          {required: true, message: "乙方名称不能为空", trigger: "blur"}
        ],
        by2: [
          {required: true, message: "丙方名称不能为空", trigger: "blur"},
          {
            validator: validate('by2', '丙方名称不能为空', '丙方名称不能为空')
          }
        ],
      },
      rules1: {
        status: [
          {required: true, message: "审核状态不能为空", trigger: "blur"}
        ],
      }
    };
  },
  created() {
    this.getList();
    // this.childlist(1306);
    this.getDicts("sys_contract_status").then(response => {
      this.contractOptions = response.data;
    });
    this.getDicts("sys_contract_type").then(response => {
      this.contractTypeOptions = response.data;
    });
    this.getDicts('sys_approve_status').then(response => {
      this.approveStatus = response.data
    })
    getInfo().then(response => {
      let deptCode = response.user.dept.deptCode;
      if (deptCode.length == 4) {//新区
        this.cityShow = true;
        this.townShow = true;
        this.villageShow = true;
        childlistUse(deptCode).then(response => {
          this.cityData = response.data;
        });
      } else if (deptCode.length == 6) {//县
        this.cityShow = false;
        this.townShow = true;
        this.villageShow = true;
        childlistUse(deptCode).then(response => {
          this.townData = response.data;
        });
      } else if (deptCode.length == 9) {//镇
        this.cityShow = false;
        this.townShow = false;
        this.villageShow = true;
        childlistUse(deptCode).then(response => {
          this.villageData = response.data;
        });
      } else {
        this.childlist(1306);
        this.cityShow = true;
        this.townShow = true;
        this.villageShow = true;
      }
    });
  },
  methods: {
    handleFzw(row) {
      this.openFzw = true;
      listStatisticsIncludeQingMiao(row.by2).then(response => {
        this.fzwList = response.rows;
      });
    },
    checkboxT(row, rowIndex) {
      if (row.shzt == 2) {
        return false;//禁用
      } else {
        return true;//不禁用
      }
    },
    handleRemove(file, fileList) {
      let url = file.url;
      let htfj = this.form.htfj.split(',');
      let newhtfj = '';
      htfj.forEach((item, i) => {
        if (url != item) {
          if (newhtfj == "") {
            newhtfj = item;
          } else {
            newhtfj = newhtfj + "," + item;
          }
        }
      });
      this.form.htfj = newhtfj;
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleView(row) {
      this.title = "预览";
      if (row.htwj == '' || row.htwj == null) {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        newfile(row.contractId).then(response => {
          loading.close();
          this.src = process.env.VUE_APP_BASE_API + response.data.path;
          this.pdfurls = process.env.VUE_APP_BASE_API + response.data.path;
          this.openDetails = true;
          this.getList();
        });
      } else {
        this.src = process.env.VUE_APP_BASE_API + row.htwj;
        this.pdfurls = process.env.VUE_APP_BASE_API + row.htwj;
        this.openDetails = true;
      }
    },

    handleListDetails(row) {
      this.openListDetails = true;
      this.title = "详情";
      const id = row.contractId;
      getCBHT(id).then(response => {
        this.form = response.data;
        this.form.scTotalArea = response.data.statistics.scTotalArea;
        this.form.totalPrice = response.data.statistics.totalPrice;
        //合同附件
        if (response.data.htfj != "") {
          let htfj = response.data.htfj != null ? response.data.htfj.split(',') : "";

          this.imageList = htfj;
          if (htfj != "") {
            htfj.forEach((item, i) => {
              let name = item.split('/')[item.split('/').length - 1];
              let imageInfo = {name: name, url: item};
              this.fileList.push(imageInfo);
            });
          }
        }
      });

      let deptCode = row.by2;
      //获取县信息
      let pCode = deptCode.substring(0, 4);//新区
      let city = deptCode.substring(0, 6);//县
      let town = deptCode.substring(0, 9);//镇

      childlistUse(pCode).then(response => {
        this.cityFormData = response.data;
        this.form.jfzjhm = city;
      });

      childlistUse(city).then(response => {
        this.townFormData = response.data;
        this.form.cbfbm = deptCode;
      });

      childlistUse(town).then(response => {
        this.villageFormData = response.data;
      });

      this.queryExamineParams.contractId = row.contractId;
      approvalList(this.queryExamineParams).then(response => {
        this.recordList = response.rows;
        this.recordtotal = response.total;
      });
    },
    contractFormat(row, column) {
      return this.selectDictLabel(this.contractOptions, row.shzt);
    },
    beforeUpload() {
      // this.productVideofileList=[];
      // this.playerOptions['sources'][0]['src'] = '';
    },
    uploadSuccess(response, file, fileList) {
      if (response.code == 200) {
        let url = process.env.VUE_APP_BASE_API + response.data[0];
        let imageInfo = {name: file.name, url: url};
        this.imageTempList.push(imageInfo);
        if (this.imageList == "") {
          this.imageList = this.imageList + url;
          this.form.htfj = this.imageList;
        } else {
          this.imageList = this.imageList + "," + url;
          this.form.htfj = this.imageList;
        }
        this.timer = setInterval(this.getImageList(fileList), 500);
      } else {
        this.$message.error(response.msg)
      }
    },
    getImageList(fileList) {
      if (this.imageTempList.length == fileList.length) {
        this.fileList = this.imageTempList;
        clearInterval(this.timer);
      }
    },
    childlist(deptCode) {
      childlistUse(deptCode).then(response => {
        this.cityData = response.data;
      });
    },
    /** 查询【请填写功能名称】列表 */
    getList() {
      this.loading = true;
      this.queryParams.httype = "1";
      this.queryParams.cbfbm = "";
      // this.queryParams.shzt = "1";
      if (this.queryParams.shzt == null || this.queryParams.shzt == undefined || this.queryParams.shzt == "") {
        this.queryParams.shzt = "1";
      }
      listCBHT(this.queryParams).then(response => {
        this.CBHTList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 选择县
    selectCity(val) {
      this.queryParams.by2 = val;
      this.city = val;
      if (val != "" && val != null) {
        childlistUse(val).then(response => {
          this.townData = response.data;
        });
      }
    },
    // 选择镇
    selectTown(val) {
      this.queryParams.by2 = val;
      this.town = val;
      childlistUse(val).then(response => {
        this.villageData = response.data;
      });
      this.form.by1 = "";
      this.form.by2 = "";
    },
    // 选择村
    selectVillage(val) {
      this.queryParams.by2 = val;
      this.village = val;
      //生成合同名称
      // 获取县信息
      let city = val.substring(0, 6);
      let cityName = "";
      getInfoByDeptCode(city).then(response => {
        cityName = response.data.deptName;
        this.form.jfmc = cityName;
        // 获取镇信息
        let town = val.substring(0, 9);
        let townName = "";
        getInfoByDeptCode(town).then(response => {
          townName = response.data.deptName;
          let villageName = "";
          // 获取村信息
          getInfoByDeptCode(val).then(response => {
            villageName = response.data.deptName;
            this.form.dsfmc = villageName;
            this.form.by1 = cityName + townName + villageName + "退耕还淀种植退出协议书";
          });
        });

      });


    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openfs = false;
      this.openfspl = false;
      this.openListDetails = false;
      this.reset();
      this.num = 0;
      this.fileList = [];
      // this.ids = [];
    },
    // 表单重置
    reset() {
      this.form = {
        by1: null,
        contractId: null,
        htbm: null,
        jfmc: null,
        jfzjhm: null,
        cbfbm: null,
        dsfmc: null,
        httype: null,
        by2: null,
        shzt: null,
        remark: null,
        remarks: null,
        htfj: null,
        htwj: null,
        scTotalArea: null,
        totalPrice: null
      };
      this.formsh = {
        contractId: null,
        status: null,
        remark: null,
      };
      this.resetForm("form");
      this.resetForm("formsh");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.by2 = "";

      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.contractId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增";
      getCode().then(response => {
        this.form.htbm = response.msg;
      });

      getInfo().then(response => {
        let deptCode = response.user.dept.deptCode;
        if (deptCode.length == 6) {//县
          this.cityUse = false;
          this.townUse = true;
          //获取县信息
          let pCode = deptCode.substring(0, 4);
          childlistUse(pCode).then(response => {
            this.cityFormData = response.data;
            this.form.jfzjhm = deptCode;
          });

          // 获取镇数据
          childlistUse(deptCode).then(response => {
            this.townFormData = response.data;
          });
        } else if (deptCode.length == 9) {//镇
          this.cityShow = false;
          this.townShow = false;
          this.villageShow = true;
          //获取县信息
          let pCode = deptCode.substring(0, 4);
          let city = deptCode.substring(0, 6);

          childlistUse(pCode).then(response => {
            this.cityFormData = response.data;
            this.form.jfzjhm = city;
          });

          childlistUse(city).then(response => {
            this.townFormData = response.data;
            this.form.cbfbm = deptCode;
          });
          this.cityUse = false;
          this.townUse = false;

          childlistUse(deptCode).then(response => {
            this.villageFormData = response.data;
          });
        } else {
          this.childlist(1306);
          this.cityShow = true;
          this.townShow = true;
          this.villageShow = true;
        }
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.contractId || this.ids
      getCBHT(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改";
        //合同附件
        if (response.data.htfj != "") {
          let htfj = response.data.htfj.split(',');
          this.imageList = htfj;
          htfj.forEach((item, i) => {
            let name = item.split('/')[item.split('/').length - 1];
            let imageInfo = {name: name, url: item};
            this.fileList.push(imageInfo);
          });
        }
      });

      getInfo().then(response => {
        let deptCode = response.user.dept.deptCode;
        if (deptCode.length == 6) {//县
          this.cityUse = false;
          this.townUse = true;
          //获取县信息
          let pCode = deptCode.substring(0, 4);
          childlistUse(pCode).then(response => {
            this.cityFormData = response.data;
            this.form.jfzjhm = deptCode;
          });

          // 获取镇数据
          childlistUse(deptCode).then(response => {
            this.townFormData = response.data;
          });
        } else if (deptCode.length == 9) {//镇
          this.cityShow = false;
          this.townShow = false;
          this.villageShow = true;
          //获取县信息
          let pCode = deptCode.substring(0, 4);
          let city = deptCode.substring(0, 6);

          childlistUse(pCode).then(response => {
            this.cityFormData = response.data;
            this.form.jfzjhm = city;
          });

          childlistUse(city).then(response => {
            this.townFormData = response.data;
            this.form.cbfbm = deptCode;
          });
          this.cityUse = false;
          this.townUse = false;

          childlistUse(deptCode).then(response => {
            this.villageFormData = response.data;
          });
        } else {
          this.childlist(1306);
          this.cityShow = true;
          this.townShow = true;
          this.villageShow = true;
        }
      });
    },
    handlefspl() {
      this.openfspl = true;
      this.reset();
      this.title = "复审";
      this.formsh.status = this.approveStatus[0].dictValue;
    },
    /** 提交按钮 */
    handlefs(row) {
      this.ids = [];
      this.reset();
      this.openfs = true;
      this.title = "审核";
      this.activeName = '1';
      const id = row.contractId;
      this.ids.push(id);
      this.formsh.status = this.approveStatus[0].dictValue;
      getCBHT(id).then(response => {
        this.form = response.data;
        this.form.remarks = response.data.remark;
        this.form.scTotalArea = response.data.statistics.scTotalArea;
        this.form.totalPrice = response.data.statistics.totalPrice;
        //乡镇
        childlistUse(row.jfzjhm.substring(0, 4)).then(response => {
          this.cityData = response.data;
        });
        //乡镇
        childlistUse(row.jfzjhm).then(response => {
          this.townData = response.data;
        });
        //村
        childlistUse(row.cbfbm).then(response => {
          this.villageData = response.data;
        });

        //合同附件
        if (response.data.htfj != '') {
          let htfj = response.data.htfj != null ? response.data.htfj.split(',') : "";

          this.imageList = htfj;
          if (htfj != "") {
            htfj.forEach((item, i) => {
              this.num++;
              let imageInfo = {name: '附件' + this.num, url: item};
              this.fileList.push(imageInfo);
            });
          }
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$confirm('是否提交至审核人员审核?', '提示', {
            cancelButtonClass: 'btn-custom-cancel',
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning'
          }).then(() => {
            this.form.shzt = "0";
            this.form.httype = "1";
            if (this.form.contractId != null) {
              editStatistics(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addStatistics(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }).catch(() => {
            this.form.shzt = "0";
            this.form.httype = "1";
            if (this.form.contractId != null) {
              editStatistics(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addStatistics(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          });
        }
      });
    },
    submitFormfs() {
      this.$refs["formsh"].validate(valid => {
        if (valid) {
          if (this.formsh.status == "3" && (this.formsh.remark == "" || this.formsh.remark == undefined || this.formsh.remark == null)) {
            this.$message.warning("复审意见不可为空");
            return false;
          }
          if (this.formsh.status == "2") {
            approvalPassStatistics({ids: this.ids, remark: this.formsh.remark}).then(response => {
              this.msgSuccess("操作成功");
              this.openfs = false;
              this.openfspl = false;
              this.getList();
            });
          } else {
            approvalNoStatistics({ids: this.ids, remark: this.formsh.remark}).then(response => {
              this.msgSuccess("操作成功");
              this.openfs = false;
              this.openfspl = false;
              this.getList();
            });
          }
        }
      });
    },
    // 审核记录
    handleExamineRecord(row) {
      this.openShjl = true;
      this.queryExamineParams.contractId = row.contractId;
      approvalList(this.queryExamineParams).then(response => {
        this.recordList = response.rows;
        this.recordtotal = response.total;
      });
    },
    getRecordList() {
      approvalList(this.queryExamineParams).then(response => {
        this.recordList = response.rows;
        this.recordtotal = response.total;
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.contractId || this.ids;
      this.$confirm('是否确认删除数据项?', "警告", {
        cancelButtonClass: 'btn-custom-cancel',
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delCBHT(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有数据项?', "警告", {
        cancelButtonClass: 'btn-custom-cancel',
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return exportCBHT(queryParams);
      }).then(response => {
        this.download(response.msg);
      })
    }
  }
};
</script>
<style>
.btn-custom-cancel {
  float: right;
  margin-left: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  height: 148px;
  line-height: 148px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.statusDv {
  display: flex;
  justify-content: center;
  align-items: center;
}

.statudPoint {
  border-radius: 50px;
  width: 6px;
  height: 6px;
  margin-right: 6px;
}

/*审核通过背景色*/
.Bg2 {
  background-color: #13ce66;
}

/*未提交*/
.Bg0 {
  background-color: #1890ff;
}

/*待审核*/
.Bg1 {
  background-color: orange;
}

/*审核失败*/
.Bg3 {
  background-color: red;
}
</style>
